<template>
  <div class="child">
    <h1>ChildOne组件</h1>
    <h1>ChildOne的玩具有:{{ toy }}个</h1>
    <h1>ChildOne的书有:{{ book }}本</h1>
    <h1>看看father还有:{{ $parent.fatherMoney }}万</h1>
    <!-- 传入的$parent是当前组件的父组件实例 -->
    <button @click="spendMoney($parent)">花掉父亲1万</button>
  </div>
</template>

<script lang="ts" setup>
    import { ref } from "vue";  
	// 数据
	let book = ref(10)
    let toy = ref(20)

    // 操作父组件的数据
    function spendMoney(parentInstance){
		parentInstance.fatherMoney -= 1
	}

    // 暴露数据
    defineExpose({
        book,
        toy
    })
</script>

<style scoped>
</style>